<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">心理咨询室</view>
		</view>
		<view class="body">
			<view class="body-picture"></view>
			<view class="body-body">
				<view class="body-body-title">问道名师——杭州市学生心理咨询室</view>
				<view class="body-body-content">
					学生心理咨询工作室，由杭州市学校心理健康教育指导中心办公室管理，联合“杭州市学生心理热线(87025885)”共同为杭州市中小学开展学生心理健康咨询服务。心理咨询工作室主要提供有需要的学生“问答式”网络辅导;“杭州市学生心理热线(87025885)”主要提供电话辅导及面对面辅导。
				</view>
				<view class="body-body-title2">杭州市学生心理咨询工作室“问答式”网络辅导:</view>
				<view class="body-body-content2">周一至周五晚上6:00-8:00 (不含节假日、寒暑假)</view>
				<view class="body-body-title2">杭州市学生心理热线电话辅导:</view>
				<view class="body-body-content2">周一至周五晚上6:00-9:00 (不含节假日、寒暑假)</view>
				<view class="body-body-title2">杭州市学生心理热线面对面辅导:</view>
				<view class="body-body-content2">每周六下午1:30-5:00(不含节假日、寒暑假) ，事先通过热线预约。</view>
				<view class=""></view>
			</view>
		</view>
		<view class="body-button" @click="startask()">
			开始询问
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-close" @click="closepopup()"></view>
				<view class="popup-title">{{popup.title}}</view>
				<view class="popup-text">{{popup.text}}</view>
				<view class="popup-button" @click="popupjump()">{{popup.button}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getUserAllCounselor,getOnlineCounselor} from "@/api/index";
	export default {
		data() {
			return {
				total: 0,
				popup:{
					title: '',
					text: '',
					button: '',
					url: '',
				},
			}
		},
		onShow() {
			
		},
		created() {
			this.workroomonlineTeacher()
		},
		methods: {
			workroomonlineTeacher(){
				getOnlineCounselor('').then(res => {
					this.total = res.total
				});
			},
			returnclick(){
				this.$router.push(this.$store.state.user.urlstudio)
			},
			startask(){
				if(this.total>0){
					if(this.$store.state.user.name){
						this.$store.state.user.urlstartask = '/pages/psychological/startask'
						this.$router.push('/pages/psychological/startask')
					}else{
						this.$store.state.user.urllogin = '/pages/psychological/index'
						this.$tab.reLaunch('/pages/login')
					}
				}else{
					this.popup={
						title: '提示',
						text: '很抱歉，现在未在咨询服务期。',
						button: '确定',
						url: '',
					}
					this.open()
				}
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			closepopup(){
				this.$refs.popup.close()
			},
			popupjump(){
				if(this.popup.url){
					this.$router.push(this.popup.url)
				}else{
					this.$refs.popup.close()
				}
			},
		},
	}
</script>

<style>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw auto 12.5vw;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.nodata-text{
		width: 100%;
		font-size: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
	}
	.body{
		margin: 0 0 0 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 45vw auto;
		overflow: auto;
	}
	.body-picture{
		width: 100%;
		height: 100%;
		background: url(../../static/psychological/top.png);
		background-size: 100% 100%;
	}
	.body-body{
		padding: 5vw;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
		
	}
	.body-body-title{
		width: 100%;
		height: 10vw;
		display: grid;
		justify-items: center;
		align-items: center;
		font-size: 5vw;
		font-weight: 600;
	}
	.body-body-content{
		width: 100%;
		height: 42vw;
		display: grid;
		justify-items: center;
		align-items: center;
		text-indent:2em;
	}
	.body-body-title2{
		font-weight: 600;
	}
	.body-body-content2{
		width: 100%;
		height: 10vw;
		display: grid;
		justify-items: start;
		align-items: start;
	}
	.body-button{
		width: 95vw;
		height: 10vw;
		border-radius: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* font-size: 4vw; */
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
	
	.popup{
		width: 60vw;
		height: 40vw;
		background: #ffffff;
		position: absolute;
		margin-left: -30vw;
		margin-top: -20vw;
		border-radius: 2.2vw;
		
		display: grid;
		justify-content: center;
		align-items: center;
		grid-template-rows: 5vw 5vw 15vw 15vw;
	}
	.popup-close{
		margin: 2vw 0 0 55vw;
		width: 3vw;
		height: 3vw;
		background: url(../../static/index/close.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.popup-title{
		display: grid;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		font-size: 4vw;
	}
	.popup-text{
		margin: 0 5vw 0 05vw;
		width: 50vw;
		display: grid;
		justify-content: center;
		align-items: center;
		font-size: 3.4vw;
	}
	.popup-button{
		margin: 0 5vw 0 5vw;
		width: 50vw;
		height: 8vw;
		border-radius: 4vw;
		display: grid;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
</style>